<template>
<div class="header-container">
   
   <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
          <el-menu-item  style="margin-right:600px">
            <div  @click="Collapse()">
                <i  class="el-icon-s-fold" size="20" v-show="!isCollapse">
                    <fold />
                </i>
                <i class="el-icon-s-unfold" size="20" v-show="isCollapse">
                    <expand />
                </i>
        </div>
                 <!-- <i class="el-icon-s-fold"></i> -->
            </el-menu-item>   
        <el-menu-item index="1" @click="$router.push('/home/emails')">首页</el-menu-item>   
          <el-menu-item index="3"  @click="$router.push('/home/message')">消息</el-menu-item>
        
        <el-menu-item index="4">
            <div  @click="logout">退出</div>
        </el-menu-item>
        </el-menu>

  <!-- <div >
      <button @click="logout">退出</button>
  </div> -->
</div>

</template>

<script>
// import {mapState,mapGetters} from 'vuex'
import bus from "../router/bus.js" 
export default {
        data() {
        return {
            isCollapse:true
        }
        },

     
methods: {
    logout(){
        localStorage.removeItem('token')
        this.$router.push('/login')
    },
    handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
     Collapse(){
        this.isCollapse=!this.isCollapse
        bus.$emit('share',this.isCollapse)
     }
        
},
}
</script>

<style lang="less" scoped>
.el-menu-demo{
    margin-left:10px ;
}
.header-container{
    background: #545c64;
    height: 60px;
}
.el-menu--horizontal>.el-menu-item {

    margin: 0 40px;
    font-size: 16px;
}
</style>